<template>
  <div class='container'>
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
    <el-form-item label="文章标题" prop="title"  placeholder="请输入文章标题">
            <el-input v-model="addForm.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody" >
                <quill-editor v-model="addForm.articleBody"></quill-editor>
          </el-form-item>
          <el-form-item label="视频地址" prop="videoURL">
            <el-input v-model="addForm.videoURL"></el-input>
          </el-form-item>
        </el-form>

         <span slot="footer" class="dialog-footer">
          <el-button @click="closeBtn" class="remove">取 消</el-button>
          <el-button type="primary" @click="addFun(addForm.title)" class="sureBtn">确 定</el-button>
        </span>
  </div>
</template>

<script>
import { add } from '@/api/hmmm/articles'
export default {
  name: 'articlesAdd',
  props: {
    addForm: {
      type: [Number, String, Object, Array],
      required: true
    }
  },
  data () {
    return {
      addFormRules: {
        title: [
          { required: true, message: '请输入文章标题' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容' }
        ]
      }
    }
  },
  methods: {
    // 添加功能
    addFun (title) {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) {
          return
        }
        this.addForm.title = title
        const { data } = await add(this.addForm)
        this.$emit('post-success', data.data)
        this.addForm.articleBody = ''
      })
    },
    // 取消
    closeBtn () {
      this.addForm.articleBody = ''
      this.addForm.title = ''
      this.$emit('closedBTN')
    }
  }
}
</script>

<style scoped lang='scss'>
.remove {
  margin-left: 400px;
}
</style>
